[username]/page.tsx - 用户资料页
基本信息
| 属性 | 值 |
|---|---|
| 路径 | src/app/[username]/page.tsx |
| 类型 | Next.js 动态路由页面 (Server Component) |
| 功能 | 用户个人资料展示页面 |
功能描述
展示用户的个人资料信息,包括提示词列表、贡献记录、点赞内容、示例提交和变更请求。支持多标签页浏览、日期筛选和固定提示词展示。
导入依赖
import { Metadata } from "next";
import { notFound } from "next/navigation";
import Link from "next/link";
import { getTranslations, getLocale } from "next-intl/server";
import { formatDistanceToNow } from "@/lib/date";
import { getPromptUrl } from "@/lib/urls";
import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import config from "@/../prompts.config";
// UI 组件...
Props 接口
interface UserProfilePageProps {
params: Promise<{ username: string }>;
searchParams: Promise<{ page?: string; tab?: string; date?: string }>;
}
| 参数 | 类型 | 说明 |
|---|---|---|
params.username | string | 用户名(格式: @username) |
searchParams.page | string | 分页页码 |
searchParams.tab | string | 当前标签页 |
searchParams.date | string | 日期筛选 (YYYY-MM-DD) |
元数据生成
generateMetadata({ params })
URL 格式验证:
- 仅支持
/@username格式 - 不以
@开头的用户名返回 "User Not Found"
元数据内容:
{
title: "${user.name || user.username} (@${user.username})",
description: "View ${user.name || user.username}'s prompts"
}
数据获取
用户查询
const user = await db.user.findFirst({
where: { username: { equals: username, mode: "insensitive" } },
select: {
id, name, username, email, avatar, role, verified,
createdAt, bio, customLinks,
_count: { prompts, contributions }
}
});
并行数据获取
| 数据项 | 说明 | 限制 |
|---|---|---|
promptsRaw | 用户的提示词 | 分页 24/页 |
total | 提示词总数 | - |
totalUpvotes | 收到的总点赞数 | - |
pinnedPromptsRaw | 固定的提示词 | - |
contributionsRaw | 贡献的提示词 | 最多 50 |
likedPromptsRaw | 点赞的提示词 | 最多 50 |
userExamplesRaw | 提交示例的提示词 | 最多 50 |
privatePromptsCount | 私有提示词数量 | 仅主人可见 |
activity* | 活动数据(4类) | 最近12个月 |
活动统计
计算过去12个月的每日活动数量:
- 创建的提示词
- 给出的点赞
- 提交的变更请求
- 发表的评论
标签页系统
| 标签值 | 显示名称 | 内容 |
|---|---|---|
prompts | 提示词 | 用户的所有提示词 |
contributions | 贡献 | 作为贡献者参与的提示词 |
likes | 点赞 | 用户点赞的提示词 |
examples | 示例 | 提交过示例的提示词 |
changes | 变更请求 | 提交/收到的变更请求 |
变更请求状态
状态颜色映射
const statusColors = {
PENDING: "bg-yellow-500/10 text-yellow-600",
APPROVED: "bg-green-500/10 text-green-600",
REJECTED: "bg-red-500/10 text-red-600",
};
变更请求类型
| 类型 | 说明 |
|---|---|
submitted | 用户提交的变更请求 |
received | 用户收到的变更请求 |
UI 结构
Container
├── Profile Header
│ ├── Avatar + Name + Badges (verified, admin)
│ ├── Bio + Social Links
│ └── Stats (prompts, upvotes, contributions, joined)
├── Activity Chart
└── Tabs
├── prompts: 日期筛选 + 固定提示词 + 列表
├── contributions: 贡献列表
├── likes: 点赞列表 (Masonry)
├── examples: 示例列表
└── changes: 变更请求列表
权限控制
| 功能 | 主人 | 访客 |
|---|---|---|
| 查看私有提示词 | ✅ | ❌ |
| 编辑资料按钮 | ✅ | ❌ |
| 看到待处理变更数 | ✅ | ❌ |
| 查看未认领标识 | ✅ | ✅ |
| 验证徽章获取 | ✅(未验证时) | ❌ |
特殊状态
未认领用户
当用户邮箱以 @unclaimed.prompts.chat 结尾时,显示 "未认领" 标识。
日期筛选
支持按日期筛选提示词,格式 YYYY-MM-DD,URL 参数 ?date=2024-01-15。
翻译命名空间
user- 用户相关文本changeRequests- 变更请求相关prompts- 提示词相关
MCP 集成
当 config.features.mcp !== false 时显示 MCP 服务器弹窗。